import styles from './index.module.less'
import { useEffect } from 'react'
import { Success, Cross } from '@react-vant/icons'

const toastObj = {
    showToast: true,
    msg: '登录成功',
    type: 'success',
    duration: 3000,
}
const newToastObj = new Proxy(toastObj, {
    set(target, prop, value) {
        target[prop] = value
        return true
    }
})

export default function Toast() {
    const icon = toastObj.type === 'success' ? <Success /> : <Cross />

    const { showToast, msg, type, duration } = toastObj

    useEffect(() => {
        setTimeout(() => {
            newToastObj.showToast = false
        }, duration)
    }, [showToast])

    return (showToast && (
        <div className={styles.toast}>
            <div className={styles['toast-content']}>
                <div className={styles['toast-icon']}>{icon}</div>
                <div className={styles['toast-title']}>
                    {msg}
                </div>
            </div>
        </div>
    ))

}
